<template>
  <div class="skuAndCoupon-label">
    <div
      class="common-wrap"
      v-if="detailAll.coupon_listscount && detailAll.coupon_listscount.length>0 && detailAll.is_try!=1"
      @click="handleOpenCouponDialog"
    >
      <div class="common-wrap-label">领券</div>
      <div class="common-wrap-con">
        <div class="coupon">
          <div
            class="coupon-item"
            v-for="(item,index) in detailAll.coupon_listscount"
            :key="index"
            v-if="index<1"
          >
            <span class="coupon_info">
              <span class="coupon_price" v-if="item.promotion_type==1">{{item.value}}折</span>
              <span class="coupon_price" v-else>&yen;{{item.value}}</span>
              <span class="coupon_tip" v-if="item.coupon_type!=3">
                <span v-if="item.at_least>0">满{{item.at_least}}元使用</span>
                <span v-else>不限订单金额</span>
              </span>
            </span>
          </div>
        </div>
        <div class="common-wrap-icon">
          <span class="icon-right"></span>
        </div>
      </div>
    </div>
    <div
      class="common-wrap"
      v-if="!(detailAll.is_miao==1 || detailAll.is_bargin==1 || detailAll.is_cycle==1 || detailAll.isGroup==1 || detailAll.is_try==1)"
      @click="handleOpenSkuDialog(detailAll.item_detail)"
    >
      <div class="common-wrap-label">{{skuLabel}}</div>
      <!-- <span class="item_info">
                    <if condition="$item_detail['props']">
                        <foreach name="item_detail.props" item="detail_vo" key="k">
                            <if condition="$item_detail['sid']">{$k|get_tb_property=$item_detail['sid']}
                                <else />{$k|get_property}
                            </if>
                        </foreach>
                        <else /> 商品数量
                    </if>
      </span>-->
      <div class="common-wrap-con">
        <span>{{skuDetail}}</span>
        <div class="common-wrap-icon" style="justify-content: flex-end;">
          <span class="icon-right"></span>
        </div>
      </div>
    </div>
    <!--sku弹层-->
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId" @skuSelected="skuSelected"></sku-dialog>
    <!--优惠券弹层-->
    <coupon-dialog :visible.sync="couponDialogVisible" :couponData="detailAll.coupon_listscount"></coupon-dialog>
    <!-- 粉丝才能购买商家二维码弹窗 -->
    <shop-code ref="shopCode"></shop-code>
  </div>
</template>


<script>
import Vue from "vue";
import skuDialog from "../../../../components/skuDialog";
import couponDialog from "../../../../components/couponDialog";
import ShopCode from "@/components/ShopCode";
export default Vue.extend({
  props: {
    detailAll: {
      type: Object,
    },
    itemId: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    skuDialog,
    couponDialog,
    ShopCode,
  },
  data() {
    return {
      skuLabel: "选择",
      skuDetail: "商品数量",
      couponDialogVisible: false,
      skuDialogVisible: false,
    };
  },
  created() {
    // console.log(this.itemId);
  },
  beforeDestroy() {
    // TODO 页面销毁前销毁所有监听事件
    this.$off()
  },
  methods: {
    skuSelected(option) {
      this.skuLabel = option.skuLabel;
      this.skuDetail = option.skuDetail;
    },
    /**
     * 打开优惠券弹层
     */
    handleOpenCouponDialog() {
      this.couponDialogVisible = true;
    },
    /**
     * 打开SKU弹层
     */
    handleOpenSkuDialog(data) {
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans;
      const that = this;
      if (that.detailAll.need_subscribe == 1) {
        that.$refs.shopCode.dialogVisible = true;
        return false;
      }
      if (buy_need_fans == 1) {
        that.$isFans(
          () => {
            this.$Error("请先等待商家绑定公众号");
            return false;
          },
          () => {
            that.$refs.shopCode.dialogVisible = true;
            return false;
          },
          () => {
            // 打开sku弹窗
            that.skuDialogVisible = true;
            // that.itemId = Number(data.item_id)
          }
        );
      } else {
        // 打开sku弹窗
        that.skuDialogVisible = true;
        //   that.itemId = Number(data.item_id)
        //   that.$emit('changeItemId',Number(data.item_id))
      }
    },
  },
});
</script>

<style></style>